<template>
  <div class="container">
    <div class="form-container">
      <div class="title">登陆</div>
      <div class="row">
        <div class="row-hd">用户名:</div>
        <div class="row-bd">
          <input type="text">
        </div>
      </div>
      <div class="row">
        <div class="row-hd">密码:</div>
        <div class="row-bd">
          <input type="password">
        </div>
      </div>
      <div class="login-btn" @click="loginHandle">登陆</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  methods: {
    loginHandle() {
      this.$router.push('/home')
    }
  },
}
</script>

<style scoped lang="scss">
  .container{
    width:100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    .form-container{
      border:1px solid #ccc;
      border-radius: 5px;
      width: 300px;
      margin-bottom: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .title{
        height:40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        background: #f2f2f2;
        width:100%;
      }
      .row{
        width:100%;
        display: flex;
        align-items: center;
        height: 50px;
        padding:10px;
        .row-hd{
          width:4em;
        }
        .row-bd{
          flex:1;
          input{
            height:20px;
            line-height: 20px;
            width:100%;
          }
        }
      }
      .login-btn{
        width:80%;
        height:30px;
        line-height: 30px;
        color:#fff;
        background: #00a4ff;
        border-radius: 5px;
        margin-bottom: 20px;
        margin-top:10px;
      }
    }
  }
</style>